import React, {useState} from 'react';
import {Form, Input, Button, Select} from 'antd';
import {MinusCircleOutlined, PlusOutlined} from '@ant-design/icons';

const Option = Select.Option;

const formItemLayout = {
  labelCol: {
    // xs: {span: 24},
    // sm: {span: 4},
    span: 4
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 40},
  },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: {span: 24, offset: 0},
    sm: {span: 20, offset: 4},
  },
};

const PriceInput = ({value = {}, onChange}) => {
  const [number, setNumber] = useState(0);
  const [currency, setCurrency] = useState('rmb');

  const triggerChange = changedValue => {
    console.log(changedValue);
    if (onChange) {
      onChange({
        number,
        currency,
        ...value,
        ...changedValue,
      });
    }
  };

  const onNumberChange = e => {
    const newNumber = parseInt(e.target.value || 0, 10);

    if (Number.isNaN(number)) {
      return;
    }

    if (!('number' in value)) {
      setNumber(newNumber);
    }

    triggerChange({
      number: newNumber,
    });
  };

  const onCurrencyChange = newCurrency => {
    if (!('currency' in value)) {
      setCurrency(newCurrency);
    }

    triggerChange({
      currency: newCurrency,
    });
  };

  return (
    <span>
      <Input
        type="text"
        value={value.number || number}
        onChange={onNumberChange}
        style={{
          width: 100,
        }}
      />
      <Select
        value={value.currency || currency}
        style={{
          width: 80,
          margin: '0 8px',
        }}
        onChange={onCurrencyChange}
      >
        <Option value="rmb">RMB</Option>
        <Option value="dollar">Dollar</Option>
      </Select>
    </span>
  );
};


export class DynamicForm extends React.Component {
  constructor (){
    super();
    this.state = {
      list: []
    };
    this.index = 0;
  }

  add = ()=>{
    const list = this.state.list;
    list.push(this.index);
    this.index++;
    this.setState({list});
  };


  render () {
    const onFinish = values => {
      console.log('Received values of form:', values);
    };

    return (
      <div>
        {this.state.list.map((item, index)=>{
          return (
            <span key={index}>{item}</span>
          )
        })}
        <Form name="dynamic_form_item" {...formItemLayoutWithOutLabel} onFinish={onFinish}>
          <Form.List name={'names'}>
            {(fields, {add, remove}) => {
              console.log(fields);
              return (
                <div>
                  {fields.map((field, index) => (
                    <Form.Item
                      {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                      label={index === 0 ? 'Passengers' : ''}
                      required={true}
                      key={field.key}
                    >
                      <Form.Item
                        {...field}
                        noStyle
                      >
                        <PriceInput style={{width: '60%'}}/>
                      </Form.Item>
                      {fields.length > 1 ? (
                        <MinusCircleOutlined
                          className="dynamic-delete-button"
                          style={{margin: '0 8px'}}
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                      ) : null}
                    </Form.Item>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      style={{width: '60%'}}
                    >
                      <PlusOutlined/> Add field
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>

          <Form.Item>
            <Button type="primary" onClick={this.add}>
              Add
            </Button>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
};
